import View from 'ol/View'
import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

const target = 'map'

const view = new View({
    center: [114.3165, 30.5953],
    zoom: 10,
    projection: 'EPSG:4326'
})

// 加载高德地图瓦片
// const layers = [new TileLayer({
//     source: new XYZ({
//         url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
//     })
// })]


// 加载天地图瓦片
const TIANDITUKEY = '5a4aa6d8a66c93a3c5bba95bf33526c4'

const url1 = `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITUKEY}`

const url2 = `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITUKEY}`
const layers = [new TileLayer({
    source: new XYZ({
        url: url1
    })
})]


const map = new Map({
    target,
    view,
    layers
})
